.main-page {
  position: relative;
  max-width: 100vw;
  margin: 0 auto;
  height: 100vh;
}

.main-page .background {
  z-index: -1;
  height: 100%;
  background: url(../images/background.gif) 50% 0/cover no-repeat;
}

.main-page .perspect {
  width: 100%;
  height: 100%;
  -webkit-perspective: 85.33333vw;
          perspective: 85.33333vw;
  -webkit-transform-origin: 50% 50% 0px;
          transform-origin: 50% 50% 0px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.main-page .perspect .linear {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(432vw);
          transform: translateZ(432vw);
  height: 100%;
  width: 100%;
}

.main-page .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main-page .layer.sec1 {
  z-index: 10;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.main-page .layer.sec1 .mubu {
  height: 72.53333vw;
  top: -17.86667vw;
  left: -7.2vw;
}

.main-page .layer.sec1 .home {
  pointer-events: none;
  z-index: 10;
  top: 10.66667vw;
  left: -18.66667vw;
  right: -18.66667vw;
  bottom: 0;
}

.main-page .layer.sec1 .home img {
  position: absolute;
  bottom: 0;
}

.main-page .layer.sec1 .door-static {
  width: 59.73333vw;
  left: 19.73333vw;
  bottom: 44vw;
  z-index: 9;
}

.main-page .layer.sec1 .door-static img {
  bottom: 0;
}

.main-page .layer.sec1 .door-static .door-text {
  position: absolute;
  z-index: 10;
  top: -49.33333vw;
  color: #da0000;
  left: 22.13333vw;
}

.main-page .layer.sec1 .door-static .door-text span {
  font-family: fangzheng_lsjt;
  font-size: 4.8vw;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: block;
  position: relative;
  letter-spacing: 1.33333vw;
}

.main-page .layer.sec1 .door-static .door-text span.t2 {
  left: 9.6vw;
  top: -13.33333vw;
  letter-spacing: 1.86667vw;
}

.main-page .layer.sec1 .door-static .cursor {
  opacity: 0;
  font-family: fangzheng_lbjt;
  text-align: center;
  background: url(../images/cursor.webp) 50% 0/25% 25% no-repeat;
  position: absolute;
  z-index: 10;
  top: 0px;
  left: 17.33333vw;
  width: 25.6vw;
  height: 36.8vw;
  padding-top: 13.33333vw;
  font-size: 3.2vw;
  color: #fff1aa;
}

.main-page .layer.sec1 .door-static .cursor.shown {
  -webkit-animation: slide 1.5s ease-in-out infinite;
          animation: slide 1.5s ease-in-out infinite;
}

.main-page .layer.sec1 .door-static .cursor.shown .cursor-tip {
  -webkit-animation: blink .5s ease-in-out infinite;
          animation: blink .5s ease-in-out infinite;
}

.main-page .layer.sec1 .door {
  width: 59.73333vw;
  left: 19.73333vw;
  bottom: 44vw;
  z-index: 9;
  display: none;
}

.main-page .layer.sec1 .door.shown {
  display: block;
}

.main-page .layer.sec1 .door.shown .light img {
  -webkit-animation: bright 2s ease-out;
          animation: bright 2s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main-page .layer.sec1 .door img {
  bottom: 0;
}

.main-page .layer.sec1 .light {
  width: 59.73333vw;
  left: 19.73333vw;
  bottom: 44vw;
  z-index: 100;
  display: none;
  pointer-events: none;
}

.main-page .layer.sec1 .light img {
  bottom: 13.33333vw;
}

.main-page .layer.sec1 .light.shown {
  display: block;
}

.main-page .layer.sec1 .light.shown img {
  -webkit-animation: bright 1.8s ease-out;
          animation: bright 1.8s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main-page .layer.sec1 .shu {
  width: 60vw;
  z-index: 11;
  bottom: 10.66667vw;
  text-align: left;
  left: -53.33333vw;
}

.main-page .layer.sec1 .shu img {
  position: absolute;
  bottom: 0;
}

.main-page .layer.sec1 .shu.shu2 {
  right: 0px;
  left: auto;
  text-align: right;
}

.main-page .layer.sec1 .shu.shown.shu1 {
  -webkit-animation: rotate 2s ease infinite;
          animation: rotate 2s ease infinite;
}

.main-page .layer.sec1 .shu.shown.shu2 {
  -webkit-animation: rotate2 2s ease infinite;
          animation: rotate2 2s ease infinite;
}

.main-page .layer.sec2, .main-page .layer.sec4 {
  z-index: 9;
  -webkit-transform: translateZ(-85.33333vw);
          transform: translateZ(-85.33333vw);
}

.main-page .layer.sec2 .pillar, .main-page .layer.sec4 .pillar {
  width: 48vw;
  left: -6.4vw;
  bottom: 37.33333vw;
}

.main-page .layer.sec2 .pillar img, .main-page .layer.sec4 .pillar img {
  position: absolute;
  bottom: 0;
}

.main-page .layer.sec2 .pillar span, .main-page .layer.sec4 .pillar span {
  font-family: fangzheng_lbjt;
  font-size: 6.4vw;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: block;
  position: relative;
  letter-spacing: 8.53333vw;
  color: #ffdb00;
  top: -34.13333vw;
  left: 37.33333vw;
}

.main-page .layer.sec2 .pillar.pillar2, .main-page .layer.sec4 .pillar.pillar2 {
  left: 58.66667vw;
}

.main-page .layer.sec2 .pillar.pillar2 img, .main-page .layer.sec4 .pillar.pillar2 img {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.main-page .layer.sec2 .pillar.pillar2 span, .main-page .layer.sec4 .pillar.pillar2 span {
  left: 2.93333vw;
}

.main-page .layer.sec3 {
  z-index: 8;
  -webkit-transform: translateZ(-170.66667vw);
          transform: translateZ(-170.66667vw);
}

.main-page .layer.sec3 .home {
  left: -5.33333vw;
  right: -5.33333vw;
  bottom: 37.33333vw;
}

.main-page .layer.sec3 .home img {
  position: absolute;
  bottom: 0;
}

.main-page .layer.sec3 .home .text {
  position: absolute;
  font-family: fangzheng_lbjt;
  font-size: 4.26667vw;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  letter-spacing: 0.53333vw;
  color: #ffdb00;
  top: -66.66667vw;
  left: 13.33333vw;
  z-index: 10;
}

.main-page .layer.sec3 .home .text.t2 {
  left: 92.53333vw;
}

.main-page .layer.sec3 .happy {
  width: 80vw;
  left: 10.66667vw;
  bottom: 37.33333vw;
}

.main-page .layer.sec3 .happy img {
  top: -120vw;
}

.main-page .layer.sec3 .papa {
  width: 29.33333vw;
  bottom: 37.33333vw;
  left: 22.66667vw;
}

.main-page .layer.sec3 .papa img {
  top: -80vw;
}

.main-page .layer.sec3 .mama {
  width: 29.33333vw;
  bottom: 37.33333vw;
  left: 45.33333vw;
}

.main-page .layer.sec3 .mama img {
  top: -73.33333vw;
}

.main-page .layer.sec4 {
  z-index: 7;
  -webkit-transform: translateZ(-256vw);
          transform: translateZ(-256vw);
}

.main-page .layer.sec5 {
  z-index: 6;
  -webkit-transform: translateZ(-341.33333vw);
          transform: translateZ(-341.33333vw);
}

.main-page .layer.sec5 .bg {
  width: 69.33333vw;
  left: 17.33333vw;
  bottom: 26.66667vw;
}

.main-page .layer.sec5 .bg img.border {
  bottom: 0;
}

.main-page .layer.sec5 .bg img.under {
  bottom: 0;
  left: 0;
}

.main-page .layer.sec5 .bg img.corner {
  left: 0;
  width: 21.33333vw;
  top: -133.33333vw;
}

.main-page .layer.sec5 .bg img.banner {
  left: 21.33333vw;
  width: 29.33333vw;
  top: -130.66667vw;
}

.main-page .layer.sec5 .bg img.banner2 {
  left: 27.73333vw;
  width: 16vw;
  top: -121.33333vw;
}

.main-page .layer.sec5 .bg img.flower1 {
  width: 21.33333vw;
  left: 48vw;
  top: -126.66667vw;
}

.main-page .layer.sec5 .bg img.flower2 {
  width: 21.33333vw;
  left: 2.66667vw;
  top: -16vw;
}

.main-page .layer.sec5 .bg img.flower3 {
  width: 21.33333vw;
  left: 48vw;
  top: -21.33333vw;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.main-page .layer.sec5 .bg img.cloud2 {
  width: 8vw;
  left: 53.33333vw;
  top: -10.66667vw;
}

.main-page .layer.sec5 .bg img.dl {
  width: 21.33333vw;
  left: 0px;
  top: -125.33333vw;
  -webkit-animation: hanging 3s ease infinite;
          animation: hanging 3s ease infinite;
}

.main-page .layer.sec5 .bg img.dl.dl2 {
  width: 13.33333vw;
  -webkit-transform: translateY(21.33333vw);
          transform: translateY(21.33333vw);
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}

.main-page .layer.sec5 .bg img.dl.dl3 {
  width: 16vw;
  left: 53.33333vw;
  -webkit-transform: translateY(8vw);
          transform: translateY(8vw);
}

.main-page .layer.sec5 .bg img.cloud1 {
  width: 16vw;
  left: 2.66667vw;
  top: -57.33333vw;
}

.main-page .layer.sec5 .bg img.year {
  width: 6.66667vw;
  left: 56vw;
  top: -57.33333vw;
}

.main-page .layer.sec5 .bg img.win1 {
  width: 10.66667vw;
  left: 1.06667vw;
  top: -26.66667vw;
}

.main-page .layer.sec5 .bg img.win2 {
  width: 10.66667vw;
  left: 58.13333vw;
  top: -26.66667vw;
}

.main-page .layer.sec5 .bg img.door {
  bottom: 0px;
  left: 13.33333vw;
  width: 40vw;
}

.main-page .layer.sec5 .bg img.banner3 {
  bottom: 38.66667vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 66.66667vw;
}

.main-page .layer.sec5 .bg img.date {
  bottom: 32vw;
  left: 8vw;
  width: 53.33333vw;
}

.main-page .layer.sec5 .bg span {
  position: absolute;
  color: #fff1aa;
  font-size: 5.33333vw;
  bottom: 108vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}

.main-page .layer.sec5 .bg span.title {
  max-width: 48vw;
  font-family: fangzheng_lbjt;
}

.main-page .layer.sec5 .bg span.word {
  bottom: 39.46667vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 3.73333vw;
}

.main-page .layer.sec5 .bg span.sub {
  bottom: 26.66667vw;
  left: 50%;
  width: 85.33333vw;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 3.73333vw;
}

.main-page .layer.sec5 .fireworks {
  bottom: 26.66667vw;
  left: 21.33333vw;
}

.main-page .layer.sec5 .fireworks .item {
  position: absolute;
  bottom: 66.66667vw;
  width: 10.66667vw;
}

.main-page .layer.sec5 .fireworks .item img.t1 {
  -webkit-animation: zoomIn 2s ease-in-out infinite;
          animation: zoomIn 2s ease-in-out infinite;
}

.main-page .layer.sec5 .fireworks .item img.t2 {
  -webkit-animation: zoomOut 2s ease-in-out infinite;
          animation: zoomOut 2s ease-in-out infinite;
}

.main-page .layer.sec5 .fireworks .item.item2 {
  left: 48vw;
  bottom: 66.66667vw;
  width: 10.66667vw;
}

.main-page .layer.sec5 .fireworks .item.item3 {
  left: 40vw;
  bottom: 112vw;
  width: 8vw;
}

.main-page .layer.sec5 .fireworks .item.item3 {
  left: 40vw;
  bottom: 112vw;
}

.main-page .layer.sec5 .fireworks .item.item4 {
  left: 8vw;
  bottom: 120vw;
  width: 16vw;
}

.main-page .layer.sec5 .fireworks .item.item5 {
  left: 5.33333vw;
  bottom: 40vw;
  width: 10.66667vw;
}

.main-page .layer.sec5 .fireworks .item.item6 {
  left: 48vw;
  bottom: 32vw;
  width: 13.33333vw;
}

.main-page .layer.sec5 .textbg {
  width: 50.66667vw;
  left: 26.66667vw;
  bottom: 26.66667vw;
}

.main-page .layer.sec5 .textbg img {
  top: -104vw;
}

.main-page .layer.sec5 .text {
  width: 61.33333vw;
  left: 22.66667vw;
  bottom: 26.66667vw;
}

.main-page .layer.sec5 .text img {
  top: -98.66667vw;
}

.main-page .layer.sec5 .text img.cloud2 {
  width: 13.33333vw;
  left: 48vw;
  top: -92vw;
}

.main-page .layer.sec5 .text img.cloud3 {
  width: 8vw;
  left: 40vw;
  top: -94.66667vw;
}

.main-page .layer.sec5 .text span {
  font-family: fangzheng_lbjt;
  font-size: 5.33333vw;
  color: #ffdb00;
  left: 16vw;
  position: absolute;
  bottom: 5.33333vw;
  padding: 1.33333vw;
  -webkit-animation: brinking 2s ease-in-out infinite;
          animation: brinking 2s ease-in-out infinite;
}

.main-page .layer.sec6 {
  z-index: 6;
  -webkit-transform: translateZ(-432vw);
          transform: translateZ(-432vw);
}

.main-page .layer.sec6 .box {
  bottom: 53.33333vw;
  height: 80vw;
  padding: 10.66667vw 5.33333vw;
  width: 66.66667vw;
  color: #666;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #f7e365;
  font-size: 3.73333vw;
}

.main-page .layer.sec6 .box .title {
  text-align: center;
  padding-bottom: 4vw;
  font-size: 4.26667vw;
}

.main-page .layer.sec6 .box label {
  display: block;
  padding-bottom: 1.33333vw;
}

.main-page .layer.sec6 .box input {
  display: block;
  width: 100%;
  margin-bottom: 3.2vw;
  height: 8.53333vw;
  padding-left: 2.13333vw;
}

.main-page .layer.sec6 .box .generate {
  position: absolute;
  text-align: center;
  padding: 1.33333vw 2.13333vw;
  background: #fff;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 58.66667vw;
  border-radius: 1.33333vw;
}

@-webkit-keyframes slide {
  0% {
    background-position-y: 0;
  }
  50% {
    background-position-y: 2.66667vw;
  }
  100% {
    background-position-y: 0;
  }
}

@keyframes slide {
  0% {
    background-position-y: 0;
  }
  50% {
    background-position-y: 2.66667vw;
  }
  100% {
    background-position-y: 0;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(5.33333vw, -6.66667vw);
            transform: translate(5.33333vw, -6.66667vw);
  }
  70% {
    -webkit-transform: translate(-2.66667vw, -2.66667vw);
            transform: translate(-2.66667vw, -2.66667vw);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(5.33333vw, -6.66667vw);
            transform: translate(5.33333vw, -6.66667vw);
  }
  70% {
    -webkit-transform: translate(-2.66667vw, -2.66667vw);
            transform: translate(-2.66667vw, -2.66667vw);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-webkit-keyframes rotate2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(-5.33333vw, -6.66667vw);
            transform: translate(-5.33333vw, -6.66667vw);
  }
  70% {
    -webkit-transform: translate(2.66667vw, -2.66667vw);
            transform: translate(2.66667vw, -2.66667vw);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes rotate2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(-5.33333vw, -6.66667vw);
            transform: translate(-5.33333vw, -6.66667vw);
  }
  70% {
    -webkit-transform: translate(2.66667vw, -2.66667vw);
            transform: translate(2.66667vw, -2.66667vw);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-webkit-keyframes bright {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  70% {
    -webkit-transform: scale(6);
            transform: scale(6);
    opacity: .9;
  }
  100% {
    -webkit-transform: scale(9);
            transform: scale(9);
    opacity: 0;
    display: none;
  }
}

@keyframes bright {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  70% {
    -webkit-transform: scale(6);
            transform: scale(6);
    opacity: .9;
  }
  100% {
    -webkit-transform: scale(9);
            transform: scale(9);
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes hanging {
  0% {
    top: -125.33333vw;
  }
  50% {
    top: -128vw;
  }
  100% {
    top: -125.33333vw;
  }
}

@keyframes hanging {
  0% {
    top: -125.33333vw;
  }
  50% {
    top: -128vw;
  }
  100% {
    top: -125.33333vw;
  }
}

@-webkit-keyframes zoomIn {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .5;
  }
}

@keyframes zoomIn {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .5;
  }
}

@-webkit-keyframes zoomOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .6;
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: .2;
  }
}

@keyframes zoomOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .6;
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: .2;
  }
}

@-webkit-keyframes brinking {
  0% {
    box-shadow: 0 0 2.66667vw rgba(255, 219, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 8vw rgba(255, 219, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 2.66667vw rgba(255, 219, 0, 0.6);
  }
}

@keyframes brinking {
  0% {
    box-shadow: 0 0 2.66667vw rgba(255, 219, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 8vw rgba(255, 219, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 2.66667vw rgba(255, 219, 0, 0.6);
  }
}
